<template>
  <div class="announcement-container">
    <el-card>
      <h2>公告查看</h2>
      <el-collapse v-model="filterVisible">
        <el-collapse-item title="查询条件" name="filter">
          <el-form :model="filters" label-width="120px">
            <el-form-item label="时间范围">
              <el-date-picker v-model="filters.dateRange" type="daterange" placeholder="选择时间范围"></el-date-picker>
            </el-form-item>
            <el-form-item label="标题">
              <el-input v-model="filters.title" placeholder="请输入标题"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-table :data="filteredAnnouncements" style="margin-top: 20px" :loading="loading">
        <el-table-column prop="title" label="标题" width="180">
          <template #default="scope">
            <el-button type="text" @click="viewDetails(scope.row)">{{ scope.row.title }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="发布日期" width="250"></el-table-column> <!-- 修改宽度 -->
        <el-table-column prop="summary" label="摘要"></el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="dialogVisible" title="公告详情">
      <div v-if="selectedAnnouncement">
        <h3>{{ selectedAnnouncement.title }}</h3>
        <p><strong>发布日期:</strong> {{ selectedAnnouncement.createTime }}</p> <!-- 修改为 createTime -->
        <p><strong>内容:</strong> {{ selectedAnnouncement.content }}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterVisible: false,
      filters: {
        dateRange: [],
        title: '',
      },
      announcements: [],
      selectedAnnouncement: null,
      dialogVisible: false,
      loading: false, // 加载状态
      findNoticeForm: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  computed: {
    filteredAnnouncements() {
      if (!Array.isArray(this.announcements)) {
        console.error('announcements 不是一个数组:', this.announcements);
        return []; // 如果不是数组，返回空数组
      }
      return this.announcements.filter(announcement => {
        const withinDateRange = this.filters.dateRange.length === 0 || (
          new Date(announcement.createTime) >= new Date(this.filters.dateRange[0]) &&
          new Date(announcement.createTime) <= new Date(this.filters.dateRange[1])
        );
        const matchesTitle = announcement.title.includes(this.filters.title);
        return withinDateRange && matchesTitle;
      });
    },
  },
  methods: {
    search() {
      this.findAnnouncement(); // 重新加载公告
    },
    reset() {
      this.filters.dateRange = [];
      this.filters.title = '';
      this.search(); // 重新加载所有公告
    },
    viewDetails(announcement) {
      this.selectedAnnouncement = announcement;
      this.dialogVisible = true;
    },
    findAnnouncement() {
      this.loading = true; // 开始加载
      this.$http.post("/notice/notice/getAllNotice", this.findNoticeForm)
        .then(resp => {
          this.announcements = resp.data.data.list || []; // 确保是数组
        })
        .catch(error => {
          console.error('获取公告失败：', error);
          this.$message.error('加载公告失败，请稍后重试。');
        })
        .finally(() => {
          this.loading = false; // 结束加载
        });
    },
  },
  created() {
    this.findAnnouncement();
  },
};
</script>

<style scoped>
.announcement-container {
  padding: 20px;
}
.el-table {
  width: 100%;
}
</style>